<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="include/head">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>用户管理</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">首页</a></li>
                            <li class="breadcrumb-item active">用户管理</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>




        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">用户列表</h3>

                                <br>
                            </div>
                            <div class="card-header">
                                <form id="search-form2" class="navbar-form form-inline"  th:action="@{/tbUser/TbUserList}" method="post">

                                    <div class="form-group " >
                                        <label>用户名:</label>
                                        <div class="col-sm-4" >
                                            <input type="text" name="name" th:value="${name}" placeholder="名称" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group " >
                                        <label>性别:</label>
                                        <div class="col-sm-4" >
                                            <select class="form-control" id="userGender" name="userGender" aria-required="true">
                                                <option value="">全部</option>
                                                <option value="0" th:selected="${userGender}==0">保密</option>
                                                <option value="1" th:selected="${userGender}==1">男</option>
                                                <option value="2" th:selected="${userGender}==2">女</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group " >
                                        <label>状态:</label>
                                        <div class="col-sm-4" >
                                            <select class="form-control" id="userState" name="userState" aria-required="true">
                                                <option value="">全部</option>
                                                <option value="0" th:selected="${userState}==0">未审核</option>
                                                <option value="1" th:selected="${userState}==1">审核通过</option>
                                                <option value="2" th:selected="${userState}==2">待审核</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group " >

                                        <button type="button" id="serch"  style="font-size:0.5rem;" class="btn btn-primary pull-right">查询</button>
                                    </div>
                                </form>
                            </div>






                            <!-- /.card-header -->
                            <div class="card-body">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th style="width: 10px">#</th>
                                        <!--                                        <th>用户序号</th>-->
                                        <th>用户名</th>
                                        <th>用户图片</th>
                                        <th>性别</th>
                                        <th>时间</th>
                                        <th>状态</th>


                                        <th style="width: 230px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!--根据实体类书写格式写-->
                                    <tr th:each="bean : ${pageInfo.list}"
                                        th:attr="id=tr_+${bean.userId}">
                                        <td th:text="${bean.userId}"></td>

                                        <td th:text="${bean.userName}"></td>
                                        <td><img th:src="${bean.userPic}" style="width: 100px;height: 100px;"></td>
                                        <td th:switch="${bean.userGender}">
                                            <span th:case="0">保密</span>
                                            <span th:case="1">男</span>
                                            <span th:case="2">女</span>
                                        </td>
                                        <td th:text=" ${#dates.format(bean.recTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                        <td th:switch="${bean.userState}">
                                            <span th:case="0">未审核</span>
                                            <span th:case="1">审核通过</span>
                                            <span th:case="2">待审核</span>
                                        </td>



                                        <td>
                                            &nbsp;
                                            <a th:href="'TbUserDetail?id='+${bean.userId}" class="btn btn-info btn-sm">
                                                <i class="fas fa-pencil-alt"></i>详情
                                            </a>  <a th:href="'edit?id='+${bean.userId}" class="btn btn-info btn-sm">
                                                <i class="fas fa-pencil-alt"></i>编辑
                                            </a>
                                            <a href="javascript:;" th:attr="data-id=|${bean.userId}" class="btn btn-danger btn-sm del">
                                                <i class="fas fa-trash"></i>删除
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!-- /.card-body -->
<!--                                                        <cms:page></cms:page>-->
                            <!-- /.card -->
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<!-- ./wrapper -->
<div th:include="include/foot"></div>
<script>
    $().ready(function() {
        $("#add").click(function() {
            location.href = 'TbUserDetail';
        });
        $("#serch").click(function() {
            $("#search-form2").submit();
        });

        //后增查询方法
        $("#query").click(function() {
            var userName= document.getElementById('userName').value;
            location.href = '/icecCms/tbuser/TbUserList?userName='+userName;

        });

        $(".edit").click(function() {
            loadPage();


        });
        $(".del").click(function() {
            if (confirm('确定删除用户吗？')) {
                let id = $(this).data('id');
                $.ajax({
                    url : 'del?id=' + id,
                    success : function(e) {
                        if (e.res) {
                            $("#tr_" + id).remove();
                            layer.msg('删除成功', {icon: 1})
                        }
                    },error:function(e){
                        layer.msg(e.responseText, {icon: 5});
                    }
                });
            }

        });
    });
    loadPage=function(){
        window.parent.loadPage();
    }
</script>
</body>
</html>